<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>隔行变色</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .li-wrapper {
      margin: 30px auto;
      border: 1px solid #00b38a;
      width: 500px;
    }

    .li-wrapper li {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px darkblue dashed;
    }
  </style>
</head>

<body>
  <ul id="liWrapper" class="li-wrapper">
    <li>1item1</li>
    <li>2item2</li>
    <li>3item3</li>
    <li>4item4</li>
    <li>5item5</li>
    <li>6item6</li>
    <li>7item7</li>
    <li>8item8</li>
    <li>9item9</li>
    <li>10item10</li>
  </ul>

  <script>
    var liWrapper = document.getElementById('liWrapper');
    var liList = liWrapper.getElementsByTagName('li');
    for (let i = 0; i < liList.length; i++) {
      // 循环遍历元素对象，然后取出每一项
      if (i % 2 === 0) {
        // 如果是i是偶数
        liList[i].style.backgroundColor = 'pink';
      } else {
        // 否则i是奇数
        liList[i].style.backgroundColor = 'yellow';
      }
    }
  </script>
</body>

</html>